<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<script type="text/javascript" src="../jct.js"></script>
<title>jCT Example,模板简单嵌入html例子 没有定义样式的tree</title>
<style>
textarea{
overflow-x:scroll;
overflow-y:scroll;
}
</style>
</head>
<body>
<script type="text/javascript">
	function go(){
		document.getElementById('src').value+=go.toString();
		Instance = new jCT(document.getElementById('template').value);
		Instance.Build();
		Instance.D=(new Function('return '+document.getElementById('json').innerHTML))();
		document.getElementById('view').innerHTML=Instance.GetView(Instance.findsub(0));
	}
</script>
<p>没有定义样式的UI组件:tree<br>
模板中定义了子成员函数findsub<br>
下面是div id=view 用来表现模板执行后的结果<button onclick="go();">执行</button>
</p>
<div id="view"></div>
<hr style="clear:both;" />
<p>下面是javascript脚本</p>
<textarea id="src" style="width:100%;height:250px;">
/*这个例子中模板的Build,和执行结果的控制都有下面的函数负责,此函数在body onload中被调用*/
</textarea>
<p>下面是模板需要的数据我们用JSON形式给出</p>
<textarea id="json" style="width:100%;height:150px;">
[
{id:1,name:'a1',pid:0},
{id:2,name:'a2',pid:0},
{id:3,name:'b1',pid:1},
{id:4,name:'b2',pid:1}
]
</textarea>
<p>下面是模板源码,<b>注意里面使用了 GetView/GetViewContinue 参数的定义 //&nbsp;D</b></p>
<textarea id="template" style="width:100%;height:400px;">
<ul>
<!---// D-->
<!---//.findsub function(pid){
	var D=this.D;
	var re=[];
	for(var i=0;i<D.length;i++)
		if(D[i].pid==pid) re.push(D[i]);
	return re;
	}
-->
<!---
	for(var i=0;i<D.length;i++){
-->
<li>+-D[i].name-+</li>
<!---
	var Sub=this.findsub(D[i].id);
	if(Sub.length){
-->
<li><!---this.GetViewContinue(Sub);--></li>
<!---}} -->
</ul>
</textarea>
</body>
</html>